<script setup>
import { list } from './index.js'
let platform = uni.getStorageSync('platform')
const showPage = (path) => {
  uni.navigateTo({
    url: path,
    fail(e) {
      console.log(e)
    },
  })
}
const showUserInfo = () => {
  let tokenInfo = uni.getStorageSync('USER_TOKEN_INFOS')
  if (tokenInfo && tokenInfo.token) {
    uni.navigateTo({
      url: '/pages/user/index',
    })
  } else {
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/login/login',
      })
    }, 200)
  }
}
</script>

<template>
  <view
    class="wrap"
    :style="{
      height: platform.gaodu + 'rpx',
    }"
  >
    <view
      class="header-wrap uni-row"
      :style="{
        paddingTop: platform.dingbu + 28 + 'rpx',
        height: platform.dingbu + 28 + 80 + 32 + 'rpx',
      }"
    >
      <view class="left uni-row">
        <image
          class="logo"
          src="/static/img/home/logo.png"
          mode="widthFix"
        ></image>
        <view class="right" style="display: flex; align-items: center">
          <view class="title" style="margin-right: 10px"> 学习中心 </view>
          <view class="label" style="color: #797168; margin-top: 10rpx">
            有志者,事竟成
          </view>
        </view>
      </view>
    </view>
    <scroll-view
      v-if="list && list.length"
      scroll-y="true"
      class="body"
      :style="{
        height: platform.gaodu - platform.dingbu - 32 - 80 - 28 + 'rpx',
      }"
    >
      <view
        :style="{
          height: platform.rpxs < 1.5 ? '20rpx' : '58rpx',
        }"
      />
      <view class="exam-list-title">训练类</view>
      <view class="list uni-row">
        <!-- background: `url(${item.icon})`, -->
        <view
          class="item"
          v-for="(item, index) in list.slice(0, 3)"
          :key="index"
          :style="{
            backgroundSize: '100% 100%',
            backgroundColor: item.color,
            borderRadius: '32rpx',
          }"
          :class="index > 2 ? 'test' : ''"
          @click="showPage(item.path)"
        >
          <view class="title">
            {{ item.title }}
          </view>
          <view
            style="display: flex; justify-content: flex-end; overflow: hidden"
          >
            <image
              :src="item.icon"
              style="
                width: 140rpx;
                height: 140rpx;
                transform: rotate(20deg) translateY(10%);
              "
            ></image>
          </view>
        </view>
      </view>
      <view class="list uni-row">
        <!-- :style="{
          marginBottom: platform.rpxs < 1.5 ? '16rpx' : '58rpx',
        }" -->
        <view
          class="item test"
          v-for="(item, index) in list.slice(3, 6)"
          :key="index"
          :style="{
            backgroundSize: '100% 100%',
            backgroundColor: item.color,
            borderRadius: '32rpx',
          }"
          @click="showPage(item.path)"
        >
          <view class="title">
            {{ item.title }}
          </view>
          <view
            style="display: flex; justify-content: flex-end; overflow: hidden"
          >
            <image
              :src="item.icon"
              style="
                width: 100rpx;
                height: 100rpx;
                transform: rotate(20deg) translateY(20%);
              "
            ></image>
          </view>
        </view>
      </view>
      <view class="exam-list-title">其他</view>
      <view
        class="list uni-row"
        :style="{
          marginBottom: platform.rpxs < 1.5 ? '16rpx' : '28rpx',
        }"
      >
        <view
          class="other-item"
          v-for="(item, index) in list.slice(6)"
          :key="index"
          :style="{
            backgroundColor: item.color,
            borderRadius: '32rpx',
          }"
          @click="showPage(item.path)"
        >
          <view>
            <view class="title"> {{ item.title }} </view>
            <view class="desc"> {{ item.label }} </view>
          </view>
          <view
            style="
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
            "
          >
            <image
              class="afterfix"
              :src="item.icon"
              style="width: 100rpx; height: 100rpx"
            ></image>
          </view>
        </view>
      </view>
      <view class="user-center" @click="showUserInfo">
        <view>
          <view class="title"> 个人中心 </view>
          <view class="desc"> Personal Center </view>
        </view>
        <image
          class="afterfix"
          src="/static/img/home/icon9.png"
          style="width: 100rpx; height: 100rpx"
        ></image>
      </view>

      <view class="title-name"> 成绩不是天生的,而是努力换来的 </view>
      <view class="title-label">
        Grades are not innate, but earned through hard work.
      </view>
      <view
        :style="{
          height: platform.rpxs < 1.5 ? '20rpx' : '58rpx',
        }"
      />
    </scroll-view>
    <view class="nothing" v-if="list && list.length < 1">
      <image src="/static/img/nothing.png" class="img"></image>
      <view class="label"> 哎呀，这里什么内容都没有 </view>
    </view>
  </view>
</template>

<style lang="less">
.wrap {
  background: url('/static/img/home/home-bg.png');
  background-size: 100% 100%;

  .header-wrap {
    justify-content: space-between;
    padding-left: 28rpx;
    padding-right: 28rpx;
    padding-bottom: 12rpx;

    .left {
      .logo {
        margin-right: 20rpx;
      }

      .title {
        font-weight: 500;
        font-size: 34rpx;
        color: #333333;
      }

      .label {
        font-size: 22rpx;
        color: #333333;
      }
    }

    .logo,
    .home {
      width: 80rpx;
    }
  }

  .body {
    padding: 0 28rpx 0;
    background-color: #fff;
    border-radius: 32rpx 32rpx 0 0;
    .exam-list-title {
      margin-bottom: 20rpx;
      font-weight: 500;
      font-size: 34rpx;
      color: #333333;
    }

    .list {
      //   flex-wrap: wrap;
      .item {
        flex: 1;
        height: 266rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        padding: 28rpx 28rpx 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        &:last-child {
          margin-right: 0rpx;
        }

        &.test {
          height: 202rpx;
        }
        .show-img {
          width: 40rpx;
        }

        .title {
          font-weight: 500;
          font-size: 32rpx;
          color: #fff;
          margin-bottom: 34rpx;
        }
      }
      .other-item {
        // width: 210rpx;
        flex: 1;
        height: 180rpx;

        display: flex;
        padding: 28rpx;
        justify-content: space-between;
        &:nth-child(1) {
          margin-right: 20rpx;
        }
        .title {
          font-weight: 500;
          font-size: 32rpx;
          color: #fff;
        }
        .desc {
          font-size: 22rpx;
          color: rgba(255, 255, 255, 0.3);
        }
        .aferfix {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
        }
      }
    }
    .user-center {
      height: 180rpx;
      // margin-right: 20rpx;
      margin-bottom: 20rpx;
      padding: 28rpx;
      display: flex;
      border-radius: 32rpx;
      justify-content: space-between;
      background-color: #fbb051;
      // .show-img {
      //   width: 40rpx;
      // }
      .title {
        font-weight: 500;
        font-size: 32rpx;
        color: #fff;
      }
      .desc {
        font-size: 22rpx;
        color: rgba(255, 255, 255, 0.3);
      }
    }

    .title-name {
      font-weight: 500;
      font-size: 40rpx;
      color: #fbb051;
      text-align: center;
    }

    .title-label {
      text-align: center;
      margin-top: 14rpx;
      font-size: 28rpx;
      color: #dbd6ca;
    }
  }
}
</style>
